<template>
	<view class="item">
		<view class="item__title">
			<rich-text :nodes="title"></rich-text>
		</view>
		<view class="item__children">
			<template v-for="item in itemData.children">
				<single  :key="item.basic.id" v-if="item.basic.type_code === 'single'" :itemData="item"></single>
				<multiple  :key="item.basic.id" v-else-if="item.basic.type_code === 'multiple'" :itemData="item"></multiple>
				<fill  :key="item.basic.id" v-else-if="item.basic.type_code === 'fill'" :itemData="item"></fill>
			</template>
		</view>
	</view>
</template>

<script>
import Single from "@/components/questionSingle.vue";
import Multiple from "@/components/questionMultiple.vue";
import Fill from "@/components/questionFill.vue";
	
export default {
	components: {
		Single,
		Multiple,
		Fill,
	},
	props: {
		itemData: {
			type: Object,
			default: () => ({}),
		},
		showAnalysis: {
			type: Boolean,
			default: false,
		},
		showAnswer: {
			type: Boolean,
			default: false,
		},
	},
	computed: {
		title() {
			return this.itemData.content.content.replace(/<p([^>]*)>/i, (p0) => {
				return `${p0}&thinsp;${this.itemData.basic.no}.&thinsp;[${this.itemData.basic.type_alias}]&thinsp;`;
			});
		},
		textAnalysis() {
			return this.itemData.content.text_analysis.replace(/<p([^>]*)>/i, (p0) => {
				return `${p0}[解析]&thinsp;`;
			});
		},
	},
	watch: {
		showAnalysis: {
			immediate: true,
			handler(val) {
				this.dShowParse = val;
			},
		},
		showAnswer: {
			immediate: true,
			handler(val) {
				this.dShowAnswer = val;
			},
		}
	},
	data() {
		return {
			dShowAnswer: false,
			dShowParse: false,
		};
	},
}
</script>

<style lang="scss" scoped>
.item {
	padding-top: 10rpx;
	padding-bottom: 10rpx;
	&__option {
		display: flex;
		&__content {
			flex: 1;
			margin-left: 6rpx;
		}
	}
	&__option:nth-child(n+1) {
		margin-top: 10rpx;
	}
	&__analysis {
		margin-top: 10rpx;
	}
	&__toolbar {
		margin-top: 10rpx;
	}
	&__children {
		padding-left: 30rpx;
	}
}
</style>